<template>
  <div>
    <!-- 导航头 -->
    <van-nav-bar title="网易严选" class="borderb" :fixed="true" :placeholder="true">
      <template #left>
        <van-icon name="wap-home-o" size="26" color="#505050" @click="goHome" />
      </template>
      <template #right>
        <van-space :size="18">
          <van-icon name="search" size="26" color="#505050" @click="goSearch" />
          <van-icon name="shopping-cart-o" size="26" color="#505050" @click="goCart" />
        </van-space>
      </template>
    </van-nav-bar>
    <!-- 商品详情轮播 -->
    <van-swipe :autoplay="5000" class="mb-6" height="375px">
      <van-swipe-item v-for="s in detailInfo?.skuInfo.skuImageList" :key="s.id">
        <van-image width="100%" height="375px" :src="s.imgUrl" />
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>
    <!-- 特价活动栏 -->
    <div class="m-promBanner m-processBanner">
      <div class="bannerContent" style="background-color: rgb(250, 30, 50)">
        <div class="col1">
          <div class="head" style="color: rgb(255, 255, 255)">
            <span>囤货特价</span><span>｜</span>
            <div style="display: inline">
              <span>距结束</span>
              <div style="display: inline-block">
                <van-count-down :time="time" format="DD天HH小时" />
              </div>
            </div>
          </div>
          <div class="content content0">
            <div class="priceArea">
              <span class="currentPrice" style="color: rgb(255, 255, 255)">
                <span style="font-size: 0.36rem">¥</span>{{ detailInfo?.price.toFixed(2) }}
              </span>
            </div>
          </div>
        </div>
        <div><img class="logoUrl" src="https://yanxuan.nosdn.127.net/static-union/16710067081db06a.png" /></div>
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="m-detailBaseInfo">
      <!-- <div class="priceInfo"></div> -->
      <!-- <div style="min-height: 1px" class="priceBox">
      <div class="spmcBanner">
        <div class="spmcPrice">
          <img class="iconUrl" src="//yanxuan.nosdn.127.net/08252a1e8acffc6e34e57e552bd1f5f2.png" /><span
            class="spmcDesc">Pro会员叠加优惠，再省<span class="spmcEconomizePrice">¥1.9</span></span><i
            class="icon-questionMark"></i>
        </div>
        <span class="spmcBtn">开通</span>
      </div>
    </div> -->
      <div class="baseInfo">
        <div class="info">
          <div class="name">{{ detailInfo?.skuInfo.skuName }}</div>
          <div class="simpleBrandInfo">
            <div class="preLogo preLogo1"></div>
            <img class="brandLogo" src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png" /><span
              class="title">网易严选</span>
          </div>
          <div class="desc">推荐理由</div>
        </div>
        <div class="comment single-line">
          <div class="wrap">
            <div class="info-wrap">
              <div class="num">99.9%</div>
              <div class="com">好评率</div>
            </div>
            <i class="u-icon u-address-right"></i>
          </div>
        </div>
      </div>
      <div class="rcmdBanner">
        <div class="angleTop"><span class="angleContent"></span></div>
        <ul>
          <li>
            <div class="key">1</div>
            <div class="recommendReason">优质加厚碳钢材质，静电喷涂，好清洁不易生锈</div>
          </li>
          <li>
            <div class="key">2</div>
            <div class="recommendReason">集中收纳，可推拉抽屉拿取方便</div>
          </li>
          <li>
            <div class="key">3</div>
            <div class="recommendReason">分层堆叠收纳，充分利用纵向空间</div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 物流信息 -->
    <div style="border-top: 0.2rem solid rgb(244, 244, 244)">
      <van-cell title="邮费：满99包邮" is-link @click="showPostage = true" />
      <van-cell title="购物返：最高返23积分" is-link @click="showShopping = true" />
      <van-popup v-model:show="showPostage" closeable position="bottom" :style="{ height: '60%' }">
        <van-divider :style="{ color: '#333', borderColor: '#333', padding: '20px 0 0 0', fontSize: '20px' }">
          邮费
        </van-divider>
        <div class="content">
          <div class="ruleTitle"> 满99元免邮</div>
          <div class="ruleContent">
            本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。</div>
        </div>
      </van-popup>
      <van-popup v-model:show="showShopping" closeable position="bottom" :style="{ height: '60%' }">
        <van-divider :style="{ color: '#333', borderColor: '#333', padding: '20px 0 0 0', fontSize: '20px' }">
          什么事购物返
        </van-divider>
      </van-popup>
    </div>
    <div style="border-top: 0.2rem solid rgb(244, 244, 244)" class="popup3">
      <!-- <van-cell title="请选择规格数量" is-link @click="showQuantity = true" />
      <van-popup v-model:show="showQuantity" closeable position="bottom" :style="{ height: '77%' }">



      </van-popup> -->

      <!-- 选规格 -->
      <van-cell is-link @click="showQuantity = true" title="请选择规格数量"></van-cell>
      <nut-sku v-model:visible="showQuantity" :sku="data?.sku" :goods="data?.goods" :stepperMin="1"
        @changeStepper="changeStepper" :btnOptions="['buy', 'cart']" @selectSku="selectSku"
        @clickBtnOperate="clickBtnOperate" @click-close-icon="closeSku"></nut-sku>

      <!-- 地址 -->
      <van-field v-model="fieldValue" is-link readonly placeholder="请选择配送地址" @click="showAddress = true">
        <template #label>
          <span class="custom-title">配送：至</span>
        </template>
      </van-field>
      <van-popup v-model:show="showAddress" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="showAddress = false"
          @finish="onFinish" />
      </van-popup>

      <!-- 无忧退换 -->
      <van-cell title="服务：7天无忧退换" is-link @click="showService = true" />
      <van-popup v-model:show="showService" closeable position="bottom" :style="{ height: '60%' }">
        <van-divider :style="{ color: '#333', borderColor: '#333', padding: '20px 0 0 0', fontSize: '20px' }">
          服务
        </van-divider>
      </van-popup>
    </div>
    <!-- 活动轮播 -->
    <div style="border-top: 0.2rem solid rgb(244, 244, 244)">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <van-image width="100%"
            src="https://yanxuan.nosdn.127.net/db8883dfba313896ad85d248528ba48b.jpg?quality=75&type=webp&imageView&thumbnail=750x0" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image width="100%"
            src="https://yanxuan.nosdn.127.net/973189089033a1c4b46b2b37141c18f0.jpg?quality=75&type=webp&imageView&thumbnail=750x0" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 用户评价 -->
    <div style="border-top: 0.2rem solid rgb(244, 244, 244)">
      <van-cell-group @click="goEvaluation">
        <van-cell title="用户评价(225854)" value="99.5%好评率" is-link center />
      </van-cell-group>
    </div>
    <!-- 店铺 -->
    <van-cell-group>
      <van-cell title="网易严选" label="以“让美好生活触手可及”为初心，网易严选逐步发展成为中国新中产喜爱的生活方式品牌。" is-link
        icon="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png" />
    </van-cell-group>
    <!-- 商品详情图 -->
    <div class="dt-section dt-section-1" style="border-top: 0.200002rem solid rgb(244, 244, 244)">
      <div class="lazy-component-wrapper">
        <div class="m-detailHtml">
          <p>
            <img src="./images/intro01.png" />
          </p>
          <p>
            <img src="./images/intro02.png" />
          </p>
          <p>
            <img src="./images/intro03.png" />
          </p>
        </div>
      </div>
    </div>

    <!-- 你可能还喜欢 -->
    <van-divider :style="{ color: '#333', borderColor: '#ccc', padding: '0 80px' }">你可能还喜欢</van-divider>
    <ul class="ul">
      <li class="li">
        <img
          src="https://yanxuan-item.nosdn.127.net/6ddb1bd0e4687143a4525adebbac676e.png?type=webp&imageView&quality=75&thumbnail=750x0"
          style="display: block; border-radius: 10px;" width="100%" alt="">
        <div class="van-ellipsis">产品名称</div>
        <div class="price">到手价￥999.00</div>
      </li>
      <li class="li">
        <img
          src="https://yanxuan-item.nosdn.127.net/6ddb1bd0e4687143a4525adebbac676e.png?type=webp&imageView&quality=75&thumbnail=750x0"
          style="display: block; border-radius: 10px;" width="100%" alt="">
        <div class="van-ellipsis">产品名称</div>
        <div class="price">到手价￥999.00</div>
      </li>
      <li class="li">
        <img
          src="https://yanxuan-item.nosdn.127.net/6ddb1bd0e4687143a4525adebbac676e.png?type=webp&imageView&quality=75&thumbnail=750x0"
          style="display: block; border-radius: 10px;" width="100%" alt="">
        <div class="van-ellipsis">产品名称</div>
        <div class="price">到手价￥999.00</div>
      </li>
      <li class="li">
        <img
          src="https://yanxuan-item.nosdn.127.net/6ddb1bd0e4687143a4525adebbac676e.png?type=webp&imageView&quality=75&thumbnail=750x0"
          style="display: block; border-radius: 10px;" width="100%" alt="">
        <div class="van-ellipsis">产品名称</div>
        <div class="price">到手价￥999.00</div>
      </li>
      <li class="li">
        <img
          src="https://yanxuan-item.nosdn.127.net/6ddb1bd0e4687143a4525adebbac676e.png?type=webp&imageView&quality=75&thumbnail=750x0"
          style="display: block; border-radius: 10px;" width="100%" alt="">
        <div class="van-ellipsis">产品名称</div>
        <div class="price">到手价￥999.00</div>
      </li>
      <li class="li">
        <img
          src="https://yanxuan-item.nosdn.127.net/6ddb1bd0e4687143a4525adebbac676e.png?type=webp&imageView&quality=75&thumbnail=750x0"
          style="display: block; border-radius: 10px;" width="100%" alt="">
        <div class="van-ellipsis">产品名称</div>
        <div class="price">到手价￥999.00</div>
      </li>
    </ul>

    <div class="marginBottom">

    </div>
    <!-- 底部动作栏 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-button color="#7232dd" type="danger" text="立即购买" @click="showQuantity = true" />
      <van-action-bar-button color="#dd1a21" type="warning" text="加入购物车" @click="showQuantity = true" />
    </van-action-bar>
    <!-- 回到顶部 -->
    <van-back-top right="3vw" bottom="8vh" class="custom"></van-back-top>
  </div>
</template>

<script setup lang="ts">
import { areaList } from '@vant/area-data';
import { ref, onMounted, reactive } from "vue";
import detailApi, { type getDetailModel, type skuImageList } from '@/api/detail'
import { useRouter, useRoute } from 'vue-router';
const route = useRoute()
const router = useRouter()
const time = ref(30 * 60 * 60 * 1000);
const showPostage = ref(false);
const showShopping = ref(false);
const showQuantity = ref(false);
const showAddress = ref(false);
const showService = ref(false);

// 规格数量

// NutUI - Sku商品规格选择
interface skuListModel {
  name: string;
  id: number;
  active: boolean;
  disable: boolean;
}
interface skuModel {
  id: number;
  name: string;
  list: skuListModel[];
}
interface goodsModel {
  skuId: string;
  price: string;
  imagePath: string;
}
interface dataModel {
  sku: skuModel[];
  goods: goodsModel;
}

const skuNumber = ref("1");
const skuIdd = ref("1");
const data = reactive<dataModel>({
  sku: [],
  goods: {
    skuId: "",
    price: "",
    imagePath: "",
  },
});





// 地址
const show = ref(false);
const fieldValue = ref('');
const cascaderValue = ref('');
// 选项列表，children 代表子选项，支持多级嵌套
const options = [
  {
    text: '浙江省',
    value: '330000',
    children: [{ text: '杭州市', value: '330100' }],
  },
  {
    text: '江苏省',
    value: '320000',
    children: [{ text: '南京市', value: '320100' }],
  },
];
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }: any) => {
  show.value = false;
  fieldValue.value = selectedOptions.map((option: any) => option.text).join('/');
}
const goodsId = ref()
const goodsNum = ref('1')
// 获取商品信息
const detailInfo = ref<getDetailModel>()
const getDetailData = async () => {
  try {
    var randomId = Math.floor(Math.random() * 900) + 100;
    let result = await detailApi.getDetail(`${randomId}`)
    detailInfo.value = result.data
    goodsId.value = result.data.skuInfo.id
    // console.log('商品信息', detailInfo);
    skuIdd.value = `${result.data.skuInfo.id}`;
    const { id, price, skuDefaultImg } = result.data.skuInfo;
    const goodsObj = {
      skuId: `${id}`,
      price: `${price}`,
      imagePath: skuDefaultImg,
    };
    data.goods = goodsObj;
    result.data.spuSaleAttrList.forEach((item) => {
      let { id, saleAttrName, spuSaleAttrValueList } = item;
      let SkuObj = {
        id,
        name: saleAttrName,
        list: [],
      };
      (spuSaleAttrValueList as any).forEach((spuItem: any, index: number) => {
        let spuObj = {
          name: spuItem.saleAttrValueName,
          id: spuItem.id,
          active: index == 0 ? true : false,
          disable: false,
        };
        (SkuObj as skuModel).list.push(spuObj);
      });
      data.sku.push(SkuObj);
    });
  } catch (error) {
    return Promise.reject('获取商品详情信息失败')
  }
}

const detailId = ref()
onMounted(() => {
  const { goodsId } = route.query
  // console.log(goodsId);
  detailId.value = goodsId

  getDetailData()

})

// inputNumber 更改
const changeStepper = (count: number) => {
  goodsNum.value = `${count}`;
};

// 切换规格类目
const selectSku = (ss: any) => {
  const { sku, skuIndex, parentSku, parentIndex } = ss;
  if (sku.disable) return false;
  data.sku[parentIndex].list.forEach((s) => {
    s.active = s.id == sku.id;
  });
};
// 底部操作按钮触发
const clickBtnOperate = (op: { type: string; value: number }) => {
  // console.log("点击了操作按钮", op);
  if (op.type == "cart") {
    router.push({
      name: `Cart`,
      query: {
        skuId: goodsId.value,
        skuNum: goodsNum.value,
      },
    });
  } else {
    // 跳转到结算页面
  }
};
// 关闭时触发
const closeSku = () => { };

// 跳转到首页
const goHome = () => {
  router.push({
    path: '/'
  })
}

// 跳转到搜索
const goSearch = () => {
  router.push({
    path: '/search'
  })
}
// 跳转到购物车
const goCart = () => {
  router.push({
    path: '/cart'
  })
}
// 跳转到用户评价
const goEvaluation = () => {
  router.push({
    path: '/evaluation'
  })
}
</script>

<style lang="less" scoped>
.marginBottom {
  height: 50px;
}

// 你可能还喜欢
.ul {
  padding: .1rem 2%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .li {
    width: 49%;
    margin-bottom: .1rem;
    background: #fff;
    text-align: center;
    line-height: .3rem;

    .van-ellipsis {
      line-height: 26px;
      font-size: 16px;
    }

    .price {
      line-height: 26px;
      font-size: 16px;
      color: darkred;
    }
  }
}


.borderb {
  border-bottom: 1px solid #d9d9d9;
}

.custom {
  width: 80px;
  font-size: 14px;
  text-align: center;
}


.custom-indicator {
  position: absolute;
  bottom: 0.5rem;
  padding: 0.01rem 0.06rem;
  right: 0.3rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 0.2rem;
  color: #333;
  background-color: #fff;
  border-radius: 4px;
}

// ---------------------------------------------------------------------------------------------------------------------------
:root {
  --van-nav-bar-title-font-size: .5333rem;
  --van-nav-bar-background: #fafafa;
  --van-count-down-font-size: .32rem;
  --van-count-down-text-color: #fafafa;
}

.mb-6 {
  margin-bottom: -0.16rem;
}

.ht375 {
  height: 10rem;
}

element.style {
  color: rgb(255, 255, 255);
  min-height: .0267rem;
}

.m-processBanner .bannerContent .col1 .content .currentPrice {
  font-size: .7467rem;
  font-family: Gilroy-bold;
}

.m-processBanner .bannerContent .col1 .content .couterPrice {
  position: relative;
  color: #999;
  font-size: .3733rem;
  margin-left: .0533rem;
  color: #fff;
}

.m-processBanner .logoUrl {
  width: 2rem;
  height: 1.0667rem;
  margin-right: 0;
  display: inline-block;
  vertical-align: middle;
}

.m-processBanner .bannerContent .col1 .content {
  font-size: .7467rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

element.style {
  color: rgb(255, 255, 255);
}

.m-processBanner .bannerContent .col1 .head {
  font-size: .32rem;
  height: .48rem;
  margin-bottom: .1067rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.m-processBanner .bannerContent .col1 {
  height: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-top: .2133rem;
}

element.style {
  background-color: rgb(250, 30, 50);
}

.m-processBanner .bannerContent {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
  padding-left: .4rem;
}

.m-processBanner,
.m-processBanner .bannerContent {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -moz-align-items: center;
  align-items: center;
}

.m-processBanner,
.m-processBanner .bannerContent {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -moz-align-items: center;
  align-items: center;
}

.m-processBanner {
  height: 1.9733rem;
  font-family: PingFangSC-Regular;
}

:root * {
  -webkit-filter: none\9 !important;
  filter: none\9 !important;
}

// 商品详细信息
.m-detailBaseInfo {
  background: #fff;
  position: relative;
  padding: .3467rem 0 .48rem .4rem;
}

.m-detailBaseInfo .priceInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.spmcBanner {
  margin: .16rem 0 .24rem;
  padding: 0 .2rem;
  width: 9.2rem;
  height: 1.0667rem;
  font-size: .32rem;
  font-weight: 600;
  line-height: 1.0667rem;
  background: #fff1d2;
  position: relative;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.spmcBanner .spmcPrice {
  line-height: .48rem;
  overflow: hidden;
}

.spmcBanner .iconUrl {
  width: .56rem;
  height: .32rem;
  margin-right: .0267rem;
  display: inline-block;
  vertical-align: middle;
}

.spmcBanner .spmcDesc {
  line-height: .4267rem;
  color: #333;
  margin-left: .0533rem;
}

.spmcBanner .spmcEconomizePrice {
  font-family: PingFang SC;
  font-weight: 700;
  color: #dd1a21;
  font-size: .3733rem;
  line-height: .6933rem;
  margin-left: .0533rem;
}

.spmcBanner .icon-questionMark {
  position: relative;
  background-image: url(/https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/normal-1d164e96ac8a5c0e7ac39af8b1982304.png);
  display: inline-block;
  vertical-align: middle;
  width: .3733rem;
  height: .3733rem;
  background-size: .0563rem .0384rem;
  background-position: -.0464rem -0.2187rem;
  margin-left: .0533rem;
  margin-top: -0.04rem;
  z-index: 1;
}

.m-detailBaseInfo .baseInfo {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: .1867rem;
}

.m-detailBaseInfo .info {
  padding-right: .32rem;
  -webkit-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.m-detailBaseInfo .info .name {
  font-size: .4267rem;
  color: #333;
  line-height: .64rem;
  margin-bottom: .0533rem;
  font-weight: 700;
}

.m-detailBaseInfo .info .simpleBrandInfo {
  margin-top: .08rem;
  margin-bottom: .0667rem;
  height: .7467rem;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -moz-align-items: center;
  align-items: center;
}

.m-detailBaseInfo .info .simpleBrandInfo .preLogo1 {
  width: .8533rem;
  height: .4267rem;
  margin-right: .1067rem;
  background: url(https://yanxuan.nosdn.127.net/6366944e4ac00118969787dedf9520e7.png) no-repeat;
  background-size: 100% 100%;
}

.m-detailBaseInfo .info .simpleBrandInfo .brandLogo {
  width: .3733rem;
  height: .3733rem;
  margin-right: .1067rem;
}

.m-detailBaseInfo .info .simpleBrandInfo .title {
  font-size: .32rem;
  line-height: .48rem;
  color: #7f7f7f;
  margin-right: .2133rem;
}

.m-detailBaseInfo .info .desc {
  font-size: .32rem;
  line-height: .48rem;
  color: #333;
  font-weight: lighter;
}

.m-detailBaseInfo .comment,
.m-detailBaseInfo .comment .wrap {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.m-detailBaseInfo .comment {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -moz-justify-content: center;
  justify-content: center;
  width: 2.3733rem;
}

.m-detailBaseInfo .single-line {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -moz-align-items: center;
  align-items: center;
}

.m-detailBaseInfo .comment .wrap {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -moz-align-items: center;
  align-items: center;
  padding-left: .2667rem;
  text-align: center;
  font-size: .3733rem;
}

.m-detailBaseInfo .comment,
.m-detailBaseInfo .comment .wrap {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.m-detailBaseInfo .comment .wrap .info-wrap .num {
  font-weight: 700;
  font-size: .4267rem;
  line-height: .6rem;
  color: #dd1a21;
  text-align: center;
}

.m-detailBaseInfo .comment .wrap .info-wrap .com {
  font-family: PingFangSC-Light;
  line-height: .48rem;
  font-size: .32rem;
  color: #7f7f7f;
}

.m-detailBaseInfo .comment .wrap .u-icon {
  background-image: url(https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/arrow-dc528da35c384481e18b0291eaf8d6e7.png);
  display: inline-block;
  vertical-align: middle;
  width: .1333rem;
  height: .2533rem;
  background-size: 1.3413rem 1.1333rem;
  background-position: 0 -0.88rem;
  -webkit-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-left: .1867rem;
  margin-right: .32rem;
}

.m-detailBaseInfo .rcmdBanner {
  margin: .16rem 0 0;
  padding: .1867rem .2667rem;
  width: 9.2rem;
  border-radius: 4.0012px;
  line-height: .8rem;
  background: #fafafa;
  border: 1.0012px solid #e6e6e6;
  border-radius: .0533rem;
  position: relative;
}

.m-detailBaseInfo .rcmdBanner .angleContent,
.m-detailBaseInfo .rcmdBanner .angleTop {
  position: absolute;
  width: 0;
  height: 0;
  border-left: .12rem solid transparent;
  border-right: .12rem solid transparent;
}

.m-detailBaseInfo .rcmdBanner .angleTop {
  top: -0.12rem;
  left: .52rem;
  border-bottom: .12rem solid #e6e6e6;
  z-index: 1;
}

.m-detailBaseInfo .rcmdBanner .angleContent {
  top: .0133rem;
  left: .12rem;
  border-bottom: .12rem solid #fafafa;
  z-index: 2;
}

.m-detailBaseInfo .rcmdBanner li:not(:last-child) {
  margin-bottom: .0533rem;
}

.m-detailBaseInfo .rcmdBanner li {
  height: .48rem;
  line-height: .48rem;
  font-family: PingFangSC-Regular;
  font-size: .32rem;
  color: #333;
}

.spmcBanner .spmcBtn {
  height: .64rem;
  padding-left: .32rem;
  padding-right: 0.32rem;
  line-height: .64rem;
  background: #12161c;
  font-size: .32rem;
  text-align: center;
  color: #f3ca84;
  border-radius: .56rem;
}

.m-detailBaseInfo .rcmdBanner .key {
  display: inline-block;
  width: .32rem;
  height: .32rem;
  border: 1.0012px solid #dd1a21;
  border-radius: 50%;
  text-align: center;
  line-height: .32rem;
  font-size: .2667rem;
  color: #dd1a21;
  font-family: PingFang SC;
  font-weight: 700;
  margin-right: .08rem;
  vertical-align: middle;
}

.m-detailBaseInfo .rcmdBanner li .recommendReason {
  display: inline-block;
  height: .48rem;
  line-height: .48rem;
  vertical-align: middle;
}

.priceBox {
  height: 1.0667rem;
  width: 9.6rem;
}

// 商品详情图
.m-detailHtml {
  width: 100%;
}

.m-detailHtml img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
</style>
